<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<view class="wrap">
				<view class="title">
					售后商品
				</view>
				<view class="goods-section">
					<view class="g-item" v-for="(item,index) in goodList" :key="index">
						<view class="first">
							<view class="right">
								<view class="img">
									<image :src="$public.imgageUrl(item.image)" mode="scaleToFill" class="image"></image>
								</view>
								<view class="text-div">
									<view class="title">
										{{item.title}}
									</view>
									<view class="text-bottom">
										<view class="money">
											<text>¥{{item.money}}</text>
										</view>
										<view class="num">
											<text style="font-size: 20rpx;">X</text> {{item.num}}
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="title">
					请选择售后类型
				</view>
				<view class="type">
					<view class="type-btn" :class="type==1?'active':''" @click="type=1">
						仅退款
					</view>
					<view class="type-btn" :class="type==2?'active':''" @click="type=2">
						退货退款
					</view>
				</view>
				<view class="title">
					请填写退款原因
				</view>
				<view class="remark">
					<uni-easyinput v-model="remark" placeholder="请填写退款原因" :clearable="false" :trim="true" :inputBorder="false"
						class="you-input" type="textarea" />
				</view>
				<view class="title">
					请上传凭证(拍照或者从相册选取)
				</view>
				<view class="upload">
					<uni-file-picker v-model="imageList" file-mediatype="image" mode="grid" @select="selectImageList"
						file-extname="png,jpg" :auto-upload="false" @delete="deleteImageImageList" class="upload-css" limit="5">
					</uni-file-picker>
				</view>
				<view class="btn-div">
					<view class="btncss" @click="btnclick">
						提交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodList: [],
				typeId: 5,
				orderId: 0,
				total: 0,
				moneyTotal: 0,
				type: 1,
				remark: "",
				imageList: [],
				imageValue: [],
				flag: true
			};
		},
		onLoad(options) {
			if (options.order) {
				this.loadOrder(decodeURIComponent(options.order))

			}
		},
		methods: {
			loadOrder(json) {
				// console.log("json", json)
				let data = JSON.parse(json)
				console.log("data", data)
				this.goodList = JSON.parse(data.json)
				this.typeId = this.goodList[0].typeId
				this.orderId = data.orderId
				this.total = data.integral
				this.moneyTotal = data.money
				// this.moneyPay = data.money
				// console.log("this.moneyTotal", this.moneyTotal)
			},
			async selectImageList(e) {
				e.tempFilePaths.forEach(item => {
					this.imageList.push({
						url: item,
						name: "",
						path: item,
					})
				})
			},
			deleteImageImageList(e) {
				this.imageList.some((item, i) => {
					if (item.path == e.tempFilePath) {
						this.imageList.splice(i, 1)
					}
				})
			},
			btnclick() {
				if (this.flag) {
					this.flag = false
					let params = {
						title: this.remark,
						orderId: this.orderId,
						typeId: this.type
					}
					if (!params.title) {
						uni.showToast({
							title: '请填写退款原因',
							duration: 2000,
							icon: "error"
						});
						this.flag = true
						return false
					}
					this.uploadImg4()
				}
			},
			async uploadImg4() {
				if (this.imageList.length == 0) {
					this.addRefund()
					return false;
				}
				let path = this.imageList.pop()
				// console.log("path", path)
				const [err, {
					data
				}] = await uni.uploadFile({
					url: this.baseUrl + '/api/upload',
					filePath: path.path,
					name: 'file',
				});
				let res = JSON.parse(data);
				this.imageValue.push(res.fileName)
				if (this.imageList.length > 0)
					this.uploadImg4()
				else
					this.addRefund()
			},
			async addRefund() {
				let params = {
					title: this.remark,
					orderId: this.orderId,
					typeId: this.type,
					bak1: this.typeId
				}
				params.image = this.imageValue.join(",")
				this.$public.htmlPost("/api/addRefund", params).then((res) => {
					console.log("addTenement res", res)
					let data = res.data;
					if (data.code == 0) {
						this.flag = true
						uni.showModal({
							title: '温馨提示',
							content: '提交成功，请等待管理员审核',
							showCancel: false,
							success: function(res) {
								uni.navigateBack()
							}
						});

					} else {
						this.flag = true
						uni.showModal({
							title: '温馨提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});

					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 0 30rpx;
	}

	.goods-section {
		// margin-top: 25rpx;
		background: #fff;
		border-radius: 16rpx;
		// padding-bottom: 1px;
		padding: 20rpx;
		color: #333333;

		// .title {
		// 	font-size: 32rpx;
		// 	padding: 30rpx 15rpx;
		// }



		.g-item {
			// border-bottom: $uni-wl-bottom-border;
			// padding-bottom: 24rpx;
			// margin-bottom: 24rpx;
		}

		.right {

			// width: 560rpx;
			display: flex;

			.img {
				width: 176rpx;

				.image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}

			.text-div {
				width: 454rpx;
				// display: flex;

				.title {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					height: 80rpx;
					display: -webkit-box;
					/* 将文本显示为块级盒子 */
					-webkit-line-clamp: 2;
					/* 最多显示两行文本 */
					-webkit-box-orient: vertical;
					/* 设置盒子内文本的垂直方向排列 */
					overflow: hidden;
					/* 隐藏溢出的文本 */
					text-overflow: ellipsis;
					/* 显示省略号 */
					margin-bottom: 32rpx;
				}

				.text-bottom {
					height: 48rpx;
					display: flex;
					justify-content: space-between;

					.money {
						font-size: 32rpx;
						color: #333333;

						text {
							font-size: 24rpx;
						}
					}

				}
			}
		}


		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #ff0000;
			padding: 35rpx 0 0 28rpx;

		}

		.bottom-box {
			// display: flex;
			// align-items: center;
			// justify-content: flex-end;
			// height: 120rpx;
			// border-top: $uni-wl-bottom-border;
			color: #333;
			font-size: 28rpx;

			// margin-top: 55rpx;
			.bottom-flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.hongzi {

					color: #C90205;
				}

				&.youhuijuan {
					padding-top: 26rpx;
					border-top: $uni-wl-bottom-border;
				}
			}

			.zuizhong {
				display: flex;
				justify-content: flex-end;
				border-top: $uni-wl-bottom-border;
				padding-top: 26rpx;

				.huangzi {
					color: #FF9466;
				}
			}
		}
	}

	.title {
		font-size: 30rpx;
		color: #333333;
		padding: 48rpx 0 24rpx;
	}

	.type {
		display: flex;
		align-items: center;

		.type-btn {
			width: 200rpx;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #E6E6E6;
			color: #666666;
			font-size: 28rpx;
			margin-right: 24rpx;
			border-radius: 50rpx;

			&.active {
				background: #DF686A;
				color: #FFFFFF;
			}
		}
	}

	.remark {
		/deep/.uni-easyinput__content {
			padding: 30rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			margin: 0;
		}
	}

	.upload {
		/deep/.file-picker__box-content {
			background: #fff;
		}
	}

	.btn-div {
		margin-top: 48rpx;

	}
</style>